<template>
  <div id="topicCommentBList">
    <h1 class="con-right-title"> <i class="fa fa-reply" @click="cancel"></i> 话题评论审核/评论回复列表 </h1>
    
    <div class="table-conBtn"> <freshCom @searchList="searchList"></freshCom></div>

    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%" max-height="490" ref="table">

      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize)}}
        </template>
      </el-table-column>

      <el-table-column label="回复人头像" prop="avatar" min-width="100">
        <template slot-scope="scope">
          <div class="avatar-box" v-if="scope.row.user">
            <el-image fit="contain" :src="scope.row.user.avatar"></el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="回复人昵称"
        prop="user.nickName"
        min-width="100"
      ></el-table-column>

      <el-table-column
        label="回复人大鹏号"
        prop="user.dpAccount"
        min-width="120"
      ></el-table-column>

      <el-table-column
        label="回复内容"
        :show-overflow-tooltip="true"
        prop="content"
        min-width="100"
      >
        <template slot-scope="scope">
          <span v-html="filterContent(scope.row)"></span> </template
      ></el-table-column>

      <el-table-column label="视图预览" width="160" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.images && scope.row.images.length > 0">
            <listImgShow :imgInfo="scope.row.images"></listImgShow>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column
        label="回复时间"
        prop="createdDate"
        min-width="150"
      ></el-table-column>

      <el-table-column label="被回复人头像" prop="parentAvatar" min-width="120">
        <template slot-scope="scope">
          <div class="avatar-box" v-if="scope.row.parent">
            <el-image fit="contain" :src="scope.row.parent.avatar"></el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="被回复人昵称"
        prop="parent.nickName"
        min-width="120"
      ></el-table-column>

      <el-table-column
        label="点赞数"
        prop="likeCount"
        width="100"
      ></el-table-column>

      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showAddPraise(scope.row.id, scope.row.likeCount)"
            >加赞</el-button
          >
          <el-button type="text" @click="addComment(scope.row.id)"
            >添加回复</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <!--加赞弹窗-->
    <dialog-add-praise
      :addPraiseData="addPraiseData"
      @refresh="refresh"
      v-if="addPraiseData.isShow"
    ></dialog-add-praise>

    <!--回复弹窗-->
    <dialogReply
      :dialogData="addCommentData"
      v-if="addCommentData.isShow"
      @refresh="refresh"
    ></dialogReply>
  </div>
</template>

<script>
import dialogReply from '@common/dialogReply'
import dialogAddPraise from '@component/common/dialogAddPraise'
import { filterCon } from '@utils/pubFunction'
import { getReplys } from '@/api/common/commentsAPI'
export default {
  name: 'topicCommentBList',
  msg: '评论审核-话题评论审核-评论回复列表',
  components: {
    dialogAddPraise,
    dialogReply
  },
  data() {
    return {
      topicId: null,
      commentId: null,
      loading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      addPraiseData: {
        isShow: false,
        likeCount: '',
        commentId: ''
      },
      addCommentData: {
        isShow: false,
        commentId: ''
      }
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.commentId = this.$route.query.id
      this.topicId = this.$route.query.topicId
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取列表 */
    async searchList() {
      this.loading = true
      let obj = { ...this.searchParams }
      let response = await getReplys(this.commentId, obj)
      this.loading = false
      this.tableData = response.rows
      this.total = response.total
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return filterCon(item)
    },
    /*加赞按钮*/
    showAddPraise(commentId, likeCount) {
      this.addPraiseData.isShow = true
      this.addPraiseData.commentId = commentId
      this.addPraiseData.likeCount = likeCount
    },
    refresh() {
      this.searchList()
    },
    /*添加回复*/
    addComment(commentId) {
      this.addCommentData.isShow = true
      this.addCommentData.commentId = commentId
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 后退 */
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less">
#topicCommentBList {
  @import url('~@common/style/imgBox.less');
  .con-right-title {
    i {
      cursor: pointer;
    }
  }
  .avatar-box {
    width: 40px;
    height: 40px;

    .el-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
</style>
